<template>
  <div class="container">
     <h1>This is an about page</h1>
     <div>
         <router-link to="/home/about/gou3-20">钩子week</router-link>|
         <router-link to="/home/about/gou3-22">钩子week2</router-link>|
     </div>
    
  <div>
      <router-view/>
  </div>
        
    
    
     <br><br>
     ------------------------------------
  <br><br>

     <LianZu :str="str" @myson="fathers"/>
     <button @click="gai()">父修改</button>
---------------   
     {{str}}
    
     <p ref="abc">子组件传来的值，也可用于修改------{{chuanstr}}</p>
     <br/><br/>
     ----------------------------------------------------------------
     <TableList :arr="arr"/>
           <br/><br/>
      -----------------------------------------------------
      <h3>留言板</h3>
      
        用户名：<input type="text" v-model="title"><br/><br/>
            <textarea  id="" cols="30" rows="5" v-model="wenben"></textarea><br/>
              <!-- 由于HTML中的属性是不区分大小写的，所以当使用DOM中的模板（HTML中）时，驼峰写法需要转化为短横线写法 -->

            <Lyb-list @myson="lyb_father" :title="title" :wenben="wenben"></Lyb-list>
  </div>
</template>

<script>
// 私有组件
import LianZu from '../components/LianZu.vue'
import TableList from '../components/tables/TableList.vue'
import LybList from '../components/tables/LybList.vue'

export default {
  data() {
    return {
        title:'国内',
        wenben:'烦恼歌发',

      chuanstr:'',
      str:66666666,
      arr:[
        {
          user:'张三',
          sex:'男',
          age:'13',
          school:'二小'
        },
         {
          user:'李四',
          sex:'男',
          age:'16',
          school:'一中'
        },
         {
          user:'小杨',
          sex:'女',
          age:'19',
          school:'一高'
        },
      ]
    }
  },
  methods:{
    gai(){
      this.str="888888888888"
    },
    fathers(n){
      this.$refs.abc.style.color="green";
      this.chuanstr=n
      console.log(n)
    },
    lyb_father(n){
      console.log(n)
    },
    
  },
  components: {
    LianZu,
    TableList,
    LybList,
  }
}
</script>


